
            <section class="row">
                <div class="col-12">
                    <div>
                        <h1><i class="fa fa-list-alt"></i> Panels</h1>
                    </div>
                    <div>
                        <ol class="breadcrumb">
                            <li><a href="#"><i class="glyphicon glyphicon-home"></i></a></li>
                            <li>Containers</li>
                            <li class="active">Panels</li>
                        </ol>
                    </div>
                </div>
            </section>

        <div class="ajax-container">
            <section class="row">
                <div class="col-4">
                    <div class="panel panel-default">
                        <div class="panel-body">
                            Panel without header and footer...
                        </div>
                    </div>
                </div>
                <div class="col-4">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h2 class="panel-title"><i class="fa fa-list-alt"></i> Panel with Header</h2>
                        </div>
                        <div class="panel-body">
                            Panel with Header ...
                        </div>
                    </div>
                </div>
                <div class="col-4">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h2 class="panel-title"><i class="fa fa-list-alt"></i> Panel with Header and Footer</h2>
                        </div>
                        <div class="panel-body">
                            Panel with Header and Footer ...
                        </div>
                        <div class="panel-footer">
                            <div class="align-center">
                                Footer
                            </div>
                            
                        </div>
                    </div>
                </div>
            </section>
            
            
            <section class="row">
                <div class="col-4">
                    <div class="panel panel-default panel-small">
                        <div class="panel-heading">
                            <h2 class="panel-title"><i class="fa fa-list-alt"></i> Small Panel</h2>
                        </div>
                        <div class="panel-body">
                            Small Panel...
                        </div>
                    </div>
                </div>
                <div class="col-4">
                    <div class="panel panel-default panel-medium">
                        <div class="panel-heading">
                            <h2 class="panel-title"><i class="fa fa-list-alt"></i> Medium Panel</h2>
                        </div>
                        <div class="panel-body">
                            Medium Panel ...
                        </div>
                    </div>
                </div>
                <div class="col-4">
                    <div class="panel panel-default panel-large">
                        <div class="panel-heading">
                            <h2 class="panel-title"><i class="fa fa-list-alt"></i> Large Panel</h2>
                        </div>
                        <div class="panel-body">
                            Large Panel ...
                        </div>
                    </div>
                </div>
            </section>
            
            <section class="row">
                <div class="col-4">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h2 class="panel-title"><i class="fa fa-list-alt"></i> Panel without Padding</h2>
                        </div>
                        <div class="panel-body no-padding">
                            Panel without padding ...
                        </div>
                    </div>
                </div>
                <div class="col-4">
                    <div class="panel panel-default panel-medium">
                        <div class="panel-heading">
                            <h2 class="panel-title">Panel without Icon</h2>
                        </div>
                        <div class="panel-body">
                            Panel without Icon ...
                        </div>
                    </div>
                </div>
                <div class="col-4">
                    <div class="panel panel-default panel-medium">
                        <div class="panel-heading bold">
                            <h2 class="panel-title"><i class="fa fa-list-alt"></i> Bold Title Panel</h2>
                        </div>
                        <div class="panel-body">
                            Bold Title Panel ...
                        </div>
                    </div>
                </div>
            </section>
            
            <section class="row">
                <div class="col-4">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h2 class="panel-title"><i class="fa fa-list-alt"></i> Panel with Guideline</h2>
                        </div>
                        <div class="panel-body">
                            <div class="guideline bg-info">
                                <i class="fa fa-info-circle fa-lg"></i> Panel Guideline Goes Here.
                            </div>
                            Panel with Guideline ...
                        </div>
                    </div>
                </div>
                <div class="col-4">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h2 class="panel-title"><i class="fa fa-list-alt"></i> Panel with Sticky Guideline</h2>
                        </div>
                        <div class="panel-body">
                            <div class="guideline guideline-sticky bg-info">
                                <i class="fa fa-info-circle fa-lg"></i> Panel Sticky Guideline Goes Here.
                            </div>
                            Panel with Sticky Guideline ...
                        </div>
                    </div>
                </div>
                <div class="col-4">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h2 class="panel-title"><i class="fa fa-list-alt"></i> Panel with Sticky Guideline No Padding</h2>
                        </div>
                        <div class="panel-body no-padding">
                            <div class="guideline guideline-sticky bg-info">
                                <i class="fa fa-info-circle fa-lg"></i> Panel Sticky Guideline Goes Here.
                            </div>
                            Panel with Sticky Guideline No Padding ...
                        </div>
                    </div>
                </div>
            </section>
            
            <section class="row">
                <div class="col-4">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h2 class="panel-title"><i class="fa fa-list-alt"></i> Default Panel</h2>
                        </div>
                        <div class="panel-body">
                            Default Panel ...
                        </div>
                    </div>
                </div>
                <div class="col-4">
                    <div class="panel panel-primary">
                        <div class="panel-heading">
                            <h2 class="panel-title"><i class="fa fa-list-alt"></i> Primary Panel</h2>
                        </div>
                        <div class="panel-body">
                            Primary Panel ...
                        </div>
                    </div>
                </div>
                <div class="col-4">
                    <div class="panel panel-info">
                        <div class="panel-heading">
                            <h2 class="panel-title"><i class="fa fa-list-alt"></i> Info Panel</h2>
                        </div>
                        <div class="panel-body">
                            Info Panel ...
                        </div>
                    </div>
                </div>
            </section>
           
            <section class="row">
                <div class="col-4">
                    <div class="panel panel-warning">
                        <div class="panel-heading">
                            <h2 class="panel-title"><i class="fa fa-list-alt"></i> Warning Panel</h2>
                        </div>
                        <div class="panel-body">
                            Warning Panel ...
                        </div>
                    </div>
                </div>
                <div class="col-4">
                    <div class="panel panel-success">
                        <div class="panel-heading">
                            <h2 class="panel-title"><i class="fa fa-list-alt"></i> Success Panel</h2>
                        </div>
                        <div class="panel-body">
                            Success Panel ...
                        </div>
                    </div>
                </div>
                <div class="col-4">
                    <div class="panel panel-danger">
                        <div class="panel-heading">
                            <h2 class="panel-title"><i class="fa fa-list-alt"></i> Danger Panel</h2>
                        </div>
                        <div class="panel-body">
                            Danger Panel ...
                        </div>
                    </div>
                </div>
            </section>
            
            <section class="row">
                <div class="col-4">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <div class="pull-right">
                                <span class="panel-toggle"><i class="fa fa-caret-down fa-lg"></i></span>
                                <button type="button" class="close panel-close" aria-hidden="true">&times;</button>
                            </div>
                            <h2 class="panel-title"><i class="fa fa-list-alt"></i> Panel with Controls</h2>
                        </div>
                        <div class="panel-body">
                            Panel with Controls ...
                        </div>
                    </div>
                </div>
                <div class="col-4">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h2 class="panel-title"><i class="fa fa-list-alt"></i> Resizable Panel</h2>
                        </div>
                        <div class="panel-body">
                           Resizable Panel ...
                        </div>
                    </div>
                </div>
                <div class="col-4">
                    <div class="panel panel-default draggable">
                        <div class="panel-heading handle">
                            <div class="pull-right">
                                <span class="panel-toggle"><i class="fa fa-caret-down fa-lg"></i></span>
                                <button type="button" class="close panel-close" aria-hidden="true">&times;</button>
                            </div>
                            <h2 class="panel-title"><i class="fa fa-list-alt"></i> Draggable Panel</h2>
                        </div>
                        <div class="panel-body">
                           Draggable Panel ...
                        </div>
                    </div>
                </div>
            </section>
        </div>